<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane v-for="(item, index) in tabsData" :key="index" v-bind="item" />
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref, computed, type PropType } from "vue";

interface TabItem {
  label: string;
  name: string;
}

const activeName = computed(() => {
  return props.defaultLabel || props.tabsData[0].name;
});

const props = defineProps({
  tabsData: {
    type: Array as PropType<TabItem[]>,
    default: () => [{ label: "", name: "" }]
  },
  defaultLabel: {
    type: String as PropType<string>,
    default: ""
  }
});
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
